<template>
  <div class="tabs">
    <div :class="{ current: key === currentVal }" v-for="(item, key) in textList" :key="key" @click="$emit('callback', key)">
      {{ item }}
    </div>
  </div>
</template>
<script>
export default {
  name: 'tabs',
  props: {
    currentVal: {
      type: Number,
      require: true,
      default: 0
    },
    textList: {
      type: Array,
      require: true
    }
  }
};
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
  border-bottom: 1px solid #80808073;
  > div {
    padding: 12px;
    border-right: 1px solid #80808073;
    color: #8080808c;
    font-weight: bold;
    cursor: pointer;
  }
  > div:first-of-type {
    border-left: 1px solid #80808073;
  }
  .current {
    background-color: #3b54c0;
    color: white;
  }
}
</style>
